<template>
  <div class="main">
    <div class="iot">
      <div class="bg">IOT</div>
      <div class="li" v-for="(item, index) in IOT" :key="index" @click="showTab(item)">
        <div class="clc" :class="{ cld: item.show == true }"></div>
        <div class="imgbox">
          <img :src="item.src" width="20" height="20" alt />
        </div>
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="b_b" v-show="false">
      <p class="blue1">队列罐车</p>
      <div style="padding: 0 40px">
        <ZWSJ v-show="car2 == [] || car2 == ''"></ZWSJ>
        <div v-for="(item, index) in car2" :key="index" class="aaa">
          <img src="../../assets/img/title/car2.webp" width="52" height="34" alt />
          <p class="nm">{{ item.carNo }}</p>
        </div>
      </div>
    </div>
    <div class="top_2" v-show="IOT[3].show">
      <div class="c">
        <div>
          <img
            src="../../assets/img/shezhi.png"
            @click="setting = !setting"
            class="shezhi"
            alt
            srcset
          />
        </div>

        <div v-show="setting">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label>
              <el-input v-model="form.name1" placeholder="请输入1号口水温"></el-input>
            </el-form-item>
            <el-form-item label>
              <el-input v-model="form.name2" placeholder="请输入2号口水温"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div v-show="!setting">
          <div class="ca">
            1号机拌合用水温度
            <span class="caa">{{ form.name1 }}°</span>
          </div>
          <div class="ca">
            2号机拌合用水温度
            <span class="caa">{{ form.name2 }}°</span>
          </div>
        </div>
      </div>
    </div>
    <div class="top_l" v-show="IOT[2].show">
      <p style="margin-top: 35px; color: #00eafa">
        累计
        <span style="color: #ffffff">{{ count }}</span> 车次
      </p>
      <span style="font-size: 14px; color: #ffffff; line-height: 26px">累计入库</span>
      <div class="rktj">
        <div style="margin: 0 auto; width: 304px; display: block" v-show="rkList == ''">
          <img src="../../assets/img/zwsj.png" alt srcset />
        </div>
        <div v-for="(item, index) in rkList" :key="index">
          <div>
            <p class="sp1" style="margin-top: 25px">{{ item.weightCount }}</p>
          </div>
          <p class="sp1">{{ item.materialName }}</p>
        </div>
      </div>
    </div>
    <div class="bl2" v-show="IOT[1].show">
      <p class="tit">实时数据分析</p>
      <div>
        <div class="blc" v-for="(item, index) in analysis" :key="index">
          <img :src="item.src" width="36" height="36" alt />
          <div>
            <p class="text1">{{ item.name }}</p>
            <p class="text2">{{ item.number }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="jk" v-show="IOT[0].show">
      <img
        v-for="(item, index) in data"
        :key="index"
        @click="play(item.monitoring_url)"
        src="../../assets/img/zzzh/jkk.webp"
        :style="{
          top: `${item.top - 125 - 30 + 130 - 60}px`,
          left: `${item.left - 60 + 40}px`,
        }"
        width="42"
        height="60"
      />
    </div>
    <div class="right" @click="close()" v-show="playShow" id="playWind1"></div>
  </div>
</template>
<script>
import ZWSJ from "../../components/ZWSJ.vue";
export default {
  components: {
    ZWSJ,
  },
  data() {
    return {
      data: "",
      jk: false,
      playShow: false,
      decoder: null,
      rkList: "",
      setting: false,
      count: "",
      car2: [],
      form: {
        name1: '',
        name2: '',
        id: ''
      },
      analysis: [
        {
          src:
            "",
          name: "PM10",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "PM2.5",
          number: "19ug/m³",
        },
        {
          src:
            "",
          name: "温度",
          number: "19℃",
        },
        {
          src:
            "",
          name: "湿度",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "TSP",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "二氧化硫",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "二氧化碳",
          number: "ug/m³",
        },
        {
          src:
            "",
          name: "风力",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "风速",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "风向",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "大气压",
          number: "79ug/m³",
        },
        {
          src:
            "",
          name: "臭氧",
          number: "--",
        },
        {
          src:
            "",
          name: "光照",
          number: "--",
        },
        {
          src:
            "",
          name: "一氧化碳",
          number: "--",
        },
        {
          src:
            "",
          name: "噪音",
          number: "79ug/m³",
        },
      ],
      IOT: [
        {
          src:
            "",
          name: "监控",
          show: false,
        },
        {
          src:
            "",
          name: "环境监测",
          show: false,
        },
        {
          src:
            "",
          name: "累计收料",
          show: false,
        },
        {
          src:
            "",
          name: "水温监测",
          show: false,
        },
      ],
    };
  },
  created() { },
  mounted() {




    this.$api
      .TemperaturefindTemperature({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {
        this.form.id = res.data;
        this.form.name1 = res.data.data.temperatureOne;
        this.form.name2 = res.data.data.temperatureTwo;
      })
      .catch((error) => {

      });

    this.getList();
    this.$api
      .AlignmentCarsFindAlignmentCarsByState({
        user_id: localStorage.getItem("user_id"),
        dispatcherId: localStorage.getItem("dispatcherId"),
      })
      .then((res) => {
        this.car2 = res.data;
      })
      .catch((error) => {

      });
    this.$api
      .WagonBalanceCountWagonByRKTJ({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {

        this.rkList = res.data;
      })
      .catch((err) => {

      });

    this.$api
      .WagonBalanceCountWagonByLJCC({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {

        this.count = res.data;
      })
      .catch((err) => {

      });
    this.$axios
      .get(
        "https://v0.yiketianqi.com/api?version=v10&appid=29886216&appsecret=9zzGvRmJ&cityid=101220101"
      )
      .then((res) => {

        this.tianqi = res.data;
        this.analysis[5].number = res.data.so2 + "ug/m³";
        this.analysis[11].number = res.data.o3 + "ug/m³";
      })
      .catch(() => { });

    this.$api
      .EnvironmentFindEnvironment({
        user_id: localStorage.getItem("user_id"),
      })
      .then((res) => {

        this.analysis[0].number = res.data.data.pm10 + "ug/m³";
        this.analysis[1].number = res.data.data.pm25 + "ug/m³";
        this.analysis[2].number = res.data.data.tem + "℃";
        this.analysis[3].number = res.data.data.hum + "℃";
        this.analysis[4].tsp = res.data.data.tsp + "ug/m³";
        this.analysis[6].number = "--ug/m³";
        this.analysis[7].number = res.data.data.wp + "级";
        this.analysis[8].number = res.data.data.ws + "m/s";
        this.analysis[9].number = res.data.data.wd;
        this.analysis[10].number = res.data.data.atm + "kpa";
        this.analysis[14].number = res.data.data.noise + "db";
      })
      .catch((err) => {

      });
  },
  destroyed() {
    this.onStop();
  },
  methods: {



    onSubmit() {
      console.log('submit!');

      this.$api
        .TemperatureupdateTemperature({
          id: this.form.id,
          temperatureOne: this.form.name1,
          temperatureTwo: this.form.name2
        })
        .then((res) => {
          this.$message({
            type: "success",
            message: "成功",
            duration: 2000,
          });
          // this.count = res.data;
        })
        .catch((err) => {

        });
    },
    close() {
      this.playShow = false;
      this.onStop();
    },
    showTab(item) {
      if (item.show) {
        item.show = false;
      } else {
        for (const key in this.IOT) {
          this.IOT[key].show = false;
        }
        item.show = !item.show;
      }
    },
    onStop() {
      if (this.decoder != null) {
        this.decoder.stop();

      }
    },
    play(url) {
      this.playShow = true;
      this.onStop();
      this.decoder = new EZUIKit.EZUIPlayer({
        id: "playWind1",
        autoplay: true,
        url: url,
        accessToken: localStorage.getItem("videoToken"),
        decoderPath: "/static/ezui",
        width: 1468,
        height: 826,
      });
    },
    // 获取数据
    getList() {
      this.$api
        .selectMonitoringByAll({ user_id: localStorage.getItem("user_id") })
        .then((res) => {

          this.data = res.data;
        })
        .catch(() => { });
    },
    getMousePos(event) {

      this.y = event.clientY - 182;
      this.x = event.clientX;

      this.$forceUpdate();

    },
  },
};
</script>
<style scoped>
.main {
  background: url("http://jjjt.oss-cn-shanghai.aliyuncs.com/ZHBHZ/bg1.jpg");
  background-size: 100% 100%;
  display: flex;
  width: 1920px;
  height: 906px;
}

.imgbox {
  display: table-cell;
  vertical-align: middle;
}

.iot {
  position: absolute;
  z-index: 9999;
  padding: 24px;
}

.imgbox img {
  width: 20px;
  height: 20px;
  margin-top: 6px;
}

.jk {
  position: absolute;
  top: 0;
}

.jk > img {
  position: absolute;
}

.bg {
  background: url("../../assets/img/zzzh/bgd.webp") no-repeat;
  width: 140px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  color: #00f6ff;
  font-size: 26px;
  margin-bottom: 40px;
}

.clc {
  width: 10px !important;
  height: 10px;
  background: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 50%;
  margin-right: 10px;
}

.cld {
  width: 10px !important;
  width: 10px;
  height: 10px;
  background: none;
  border: 1px solid #ffffff;
  border-radius: 50%;
  margin-right: 10px;
}

.li > div {
  width: 30px;
  display: inline-block;
}

.li > span {
  text-align: center;
}

.li {
  cursor: pointer;
  background: url("../../assets/img/zzzh/bgf.webp") no-repeat;
  width: 140px;
  height: 32px;
  line-height: 32px;
  color: #ffffff;
  padding-left: 10px;
  margin-bottom: 16px;
}
.right {
  width: 1468px;
  height: 826px;
  background: #4c4b4b;
  border: 2px solid;
  display: inline-block;
  margin: 30px 0px 0px 350px;
  border-image: linear-gradient(-90deg, #299bff, #1753ff) 10 10;
}

.bl2 {
  background: url("../../assets/img/title/bl1.webp") no-repeat;
  width: 812px;
  height: 400px;
  display: inline-block;
  margin: 215px auto;
}
.tit {
  font-size: 18px;
  color: #01f2ff;
  line-height: 80px;
  margin-left: 10px;
}
.text2 {
  font-size: 16px;
  color: #00f6ff;
}

.text1 {
  font-size: 14px;
  color: #ffffff;
  vertical-align: top;
}
.blc {
  display: inline-block;
  margin-bottom: 60px;
  width: 160px;
}

.blc > img {
  margin: 0 16px;
}
.top_l {
  background: url("../../assets/img/title/sld.webp");
  width: 464px;
  height: 414px;
  margin: 175px auto;
  padding-left: 16px;
}

.top_2 {
  background: url("../../assets/img/bbbb3.png");
  width: 464px;
  height: 286px;
  background-size: 100% 100%;
  margin: 175px auto;
  padding-left: 16px;
}

.blc > div {
  display: inline-block;
}
.rktj > div {
  width: 72px;
  display: inline-block;
  margin-right: 20px;
}

.rktj > div > div {
  display: inline-block;
  background: url("../../assets/img/title/rktj.webp");
  width: 65px;
  height: 72px;
}
.sp1 {
  width: 100%;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  color: #ffffff;
}
.b_b {
  display: inline-block;
  background: url("../../assets/img/title/cl3.webp") no-repeat;
  background-size: 100% 100%;
  width: 910px;
  height: 290px;
  margin: 200px auto;
}
.aaa {
  display: inline-block;
  text-align: center;
  width: 83px;
  margin-bottom: 24px;
}
.nm {
  height: 12px;
  font-size: 16px;
  font-family: San Francisco Display;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}
.blue1 {
  line-height: 40px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #00ffff;
  text-align: center;
}

.c {
  padding: 24px;
}
.ca {
  font-size: 32px;
  color: #ffffff;
  line-height: 80px;
  text-align: center;
}
.caa {
  color: #00f5fe;
  font-size: 40px;
}
.shezhi {
  text-align: right;
  display: inline-block;
  width: 22px;
  position: relative;
  left: 410px;
  top:-15px;
  /* float: right; */
}
</style>
